<template>
    <div class="edit-dialog">
         <el-dialog
            title="里程碑管理"
            :visible.sync="flag"
            width="1254px"
            :before-close="handleClose"
            :close-on-click-modal="false"
            custom-class="dialog-box">
            <div class="add-btn">
                <img src="../../../assets/images/icon_from_add.png" alt="">添加里程碑节点
            </div>
            <div class="table-box">
                <div v-for="n in infoData7">
                    <span class="table-header table-header3">{{n.label}}
                        
                    </span>
                </div>
                <div v-for="n in infoData8">
                    <span class="table-header table-header3">{{n.label}}</span>
                    <span class="table-body table-body3">

                    </span>
                    <span class="table-body table-body3"></span>
                    <span class="table-body table-body3"></span>
                    <span class="table-body table-body4"></span>
                    <span class="table-body table-body3">
                        <div class="operation-btn">
                            <span>编辑</span>
                            <span>删除</span>
                        </div>
                    </span>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="flag = false">取 消</el-button>
                <el-button type="primary" @click="flag = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name:'MilestoneDialog',
        props: {
            flag: {
                type: Boolean,
                default: ''
            },
            type:{
                type: String,
                default: ''
            }
        },
        data(){
            return{
                rules:{},
                ruleForm:{

                },
                fileList:[],
                //里程碑信息
                infoData7:[
                    {label:'里程碑名称',value:''},
                    {label:'计划完成时间',value:''},
                    {label:'实际完成时间',value:''},
                    {label:'完成标准',value:''},
                    {label:'附件',value:''},
                    {label:'操作',value:''},
                ],
                infoData8:[
                    {label:'项目建议书审批通过',value:''},
                    {label:'可研报告审批通过',value:''},
                    {label:'可研批复审批通过',value:''},
                    {label:'合同签订',value:''},
                    {label:'上线试运行',value:''},
                    {label:'初验',value:''},
                    {label:'合规审查',value:''},
                    {label:'终验',value:''},
                    {label:'请输入里程碑名称',value:''},
                ],
            }
        },
        methods:{
            handleClose(){

            },
        }
    }
</script>

<style lang="scss" >
.edit-dialog{
    .add-btn{
        width: 152px;
        height: 32px;
        background: #3171ee;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height:32px;
        color: #ffffff;
        cursor:pointer;
        img{
            width:14px;
            height:14px;
            margin-right:10px;
        }
    }
    .table-box{
        margin:24px 0;
        // height:48px;
        display: flex;
        flex-wrap: wrap;
        &>div{
            display: flex;
            align-items: center;
        }
        &>:nth-of-type(5){
            width: 143px;
        }
    }
    .table-header{
        display: inline-block;
        width: 203px;
        height: 48px;
        background:#FAFAFA;
        line-height: 48px;
        text-align: center;
        border:1px solid #EBEBEB;
    }
    .table-body{
        display: inline-block;
        width: 1201px;
        height: 48px;
        border:1px solid #EBEBEB;
        border-left:0;
        text-indent: 24px;
        line-height: 48px;
    }
    .table-header3{
        width:203px;
        }
    .table-body3{
        width:203px;
        // text-align: center;
        .operation-btn{
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            color: #0d72ff;
            &>:first-child{
                margin-right:10px;
            }
            span{
                cursor:pointer;
            }
        }
    }
    .table-body4{
        width: 143px;
    }
}
</style>